<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播的切换点</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .points{
            margin: 30px auto;
            text-align: center;
        }
        .makeCenter{
            display: inline;
        }
        .points ul{
            border: 1px solid red;
            display: inline;
            list-style-type: none;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
            border-radius: 20px;
            padding: 0 5px;
        }
        .points li{
            display: inline-block;
            margin: 0px 5px;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background-color: red;
            list-style-type: none;
            list-style: none;
            cursor: pointer;
        }
        .points .bro{
            background-color: yellow;
            display: inline-block;
            margin: 0px 5px;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            list-style-type: none;
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="points">
    <div class="makeCenter">
        <ul>
            <li class="bro"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<script>
var lis = document.getElementsByClassName("makeCenter")[0].getElementsByTagName("li");

document.getElementsByClassName("makeCenter")[0].addEventListener("click",function (e) {
    if(e.target.nodeName.toString()=="LI"){
        for(var i=0;i<lis.length;i++){
            if(lis[i].className=="bro"){
                lis[i].className = "";
            }
        }
        e.target.className = "bro";
    }
})
</script>
</body>
</html>